<template>
    <div>
        <div class="return-bar">
            <i class="iconfont" @click="back()">&#xe668;</i>
            充值
        </div>

        <div class="recharge detail_top">
            <h1>充值流程</h1>
            <div class="sub">请用您绑定的银行卡转账至您的华兴银行存管账户，即可完成充值操作</div>
            <div>

                <div class="card">


                    <div class="btn " >
                        <span @click="updateCard" style="margin-right:20px">更新银行卡信息</span>
                        <span @click="changeCard" v-if="bind_status == true ">更换银行卡</span>
                        <span @click="bindingCard" v-else>去绑卡</span>
                    </div>

                    <div class="con1" style="line-height:30px;">
                        <div><label>姓名:</label> {{hx.bank_acname}}</div>
                        <div><label>卡号:</label> {{card.cardno}}</div>
                    </div>
                </div>
                
                <div class="arrow">
                    <img src="../../assets/images/arrow.png" />
                    转帐至
                </div>

                <div class="card hx">
                    <div class="btn copyHx" data-clipboard-text="{{hx.bank_acno}}"  @click="copyHx">复制此卡号</div>
                    
                    <div class="con1">
                        <div><label>姓名:</label> {{hx.bank_acname}}</div>
                        <div><label>开户行:</label> {{hx.bank_name}}</div>
                        <div><label>卡号:</label> {{hx.bank_acno}}</div>
                    </div>
                </div>


                <div class="note">
                    <div class="title">温馨提示</div>
                    <div>
                        <p>您可以使用您绑定的银行卡，通过跨行转账（手机银行、网银、柜台）方式将资金转账至您的华兴银行存管账户中即可完成充值，资金实时到账（建行和农行2小时内到账，具体以银行时间为准）。</p>
                        <p>充值时，如果绑定的账户是华兴银行实体卡，请点击t+1充值按钮，直接充值，资金会实时到账。</p>
                        <p>
                        如果转账不成功或绑定卡未开通手机银行/网银，请点击这里：<span class="hla" @click="goRecharge">使用T＋1充值方式。</span>
                        </p>
                    </div>
                </div>


            </div>
        </div>

        <toast :show.sync="showtoast.show">{{showtoast.txt}}</toast>
        <loading  :show.sync="showLoading" text="正在读取"></loading>
        <form-page :url.sync="postBank.url"  :rdata.sync="postBank.data"></form-page>
    </div>
</template>

<script>
var vm = this;
import api from '../../data/api';
import FormPage from '../../components/common/form'
import Clipboard from 'clipboard';
import { mapGetters, mapActions } from 'vuex'
import {Toast, Loading} from 'vux'
export default {
    data () {
        return{
            showtoast:{
                show:false,
                txt:'复制成功'
            },

            bind_status:false,

			postBank:{
				url:'', 
				data:{
					RequestData:'',
					transCode:''
				}
            },
            postForm:{},

            hx:{
                bank_acname:'',
                bank_acno:'',
                bank_name:''
            },
            card:{
                bankname:'',
                cardno:''
            }
        }
    },

    computed: {
		...mapGetters([
            'showLoading'
        ])
    },



    components: {
        FormPage,
        Toast,
        Loading
    },

    methods:{
        ...mapActions([ 'setShowLoading' ]),


        async bindingCard(){
            this.setShowLoading(true);

            var res = await api.user.binding_card();
            //console.log(res)
            this.getForm();
            this.postForm.show = true
            this.postBank.url = res.action_url
            this.postBank.data.RequestData = res.RequestData
            this.postBank.data.transCode = res.transCode
            this.postForm.submit();
        },

        goRecharge(){
            this.$route.router.go('/recharge')
        },

		getForm(){
			for(var a in this.$children){
				if(this.$children[a].name == 'form')
					this.postForm = this.$children[a];
			}
		},


        back(){
            this.$route.router.go('/user')
        },

        copyHx(){
            var that = this;
            var clipboard = new Clipboard('.copyHx');
            clipboard.on('success', function(e) {
                that.showtoast.show = true;
                that.showtoast.txt = '复制成功';
                e.clearSelection();
            });
        },

        async updateCard(){
            this.setShowLoading(true);

            var res = await api.user.set_bink_info();

            this.showtoast.show = true, this.showtoast.txt = res.msg;

            res = await api.user.get_bank_info();
            this.card.cardno = res.cardno;


            this.setShowLoading(false);
        },

        async changeCard(){
            this.setShowLoading(true);

            var res = await api.user.go_change_card();
            //console.log(res)
            this.getForm();
            this.postForm.show = true
            this.postBank.url = res.action_url
            this.postBank.data.RequestData = res.RequestData
            this.postBank.data.transCode = res.transCode
            this.postForm.submit();
        },

        async init(){

            this.setShowLoading(true);
            
            var res = await api.user.is_Logined();

            if(res.status == false){
                //this.$route.go('/login?from=recharge')
                this.$route.router.go('/login?from=recharge');
            }


            res = await api.user.get_hx_bank_info();
            vm.hx = res.data;
            
            res = await api.user.get_bank_info();
            this.card.cardno = res.cardno;

            this.bind_status = res.bind_status || false;

            this.setShowLoading(false);
        }
    },

	route: {
		activate ( transition ) {
            vm = this;
            transition.next();
            vm.init();
           
        }
    }
};
</script>

<style lang="scss" scoped>
@import "../../assets/sass/mixins";
@import "../../assets/sass/_mixin";

h1 {
  @include font-dpr(18px);
  margin-bottom:10px;
  font-weight:bold;
}
.sub{
    margin-bottom:20px;
    font-weight:bold;
    font-size:14px;
    color:#999;
}
.recharge{
    padding:10px;
    background: #fff;
    .arrow{
        text-align: center;
        font-size:20px;
        img{
            width: 50px;
            vertical-align: middle;
        }
    }
    .card{
        margin:auto;
        background-image:url('../../assets/images/user/card_bg1.jpg');
        background-size:contain;
        background-position:center center;
        background-repeat: no-repeat;
        min-height: 168px;
        max-width: 347px;
        color:#fff;
        font-size:16px;
        padding:15px;
        .btn{
            text-align: right;
            font-size:14px;
        }
        .con1{
            margin-top: 50px;
            margin-left: 12px;
            font-size:13px;
            label{
                font-weight: bold;
            }
        }

        &.hx{
            background-image:url('../../assets/images/user/card_bg.jpg');
        }

        .account{
            margin-left: 80px;
            margin-top: -5px;
            margin-bottom: -47px;
        }
    }
    .note{
        margin-top:20px;
        font-size:13px;
        .title{
            font-size:15px;
            margin-bottom:10px;
            color:#333;
            font-weight: bold;
        }
        p{
            color:rgb(73, 73, 73);
            padding-bottom:10px;
            border-bottom:1px dashed #999;
            margin-bottom:10px;
            &:last-child{
                border:none;
            }
            .hla{
                border:1px solid #ffa750;
                background:rgb(255, 243, 192);
                padding: 3px;
            }
        }
    }
}
</style>
